راه راه کردن با دو رنگ متفاوت با css و JQuery
استفاده از جدول برای نمایش اطلاعات به صورت منظم تر و ملموس تر بسیار مرسوم است. در این مقاله هدف این است که به دلیل راحتر خوانده شدن جدول و پیشگیری از اشتباه خواندن سطرها توسط بازدیدکنندگان و کاربران جلوگیری به عمل آید.
یکی از روش های کاهش اشتباه در جدول خوانی استفاده از دو رنگ است. به این صورت که یک در میان رنگ سطر جدول ها تغییر کند. انجام این کا روش های فراوانی است که در این مقاله یکی از روش های ساده ی آن توسط چند خط کد CSS3 را آموزش خواهیم داد، که نیازی به هیچ گونه کد جاوا اسکریپت ندارد. توسط کدی که در ادامه خواهید دید نتیجه ی کار به صورت تصویر زیر خواهد بود:
برای متفاوت نشان دادن رنگ هر سطر به صورت یک در میان کافیست دستور CSS زیر را روی آن اعمال کنید.
کدهای CSS
|
|
tbody tr:nth-child(odd){
background-color:#ccc;
}
|
پارامتر odd در این قطعه کد به منظور پر رنگ نشان دادن سطرهای فرد است. حال اگر قصد دارید این مورد روی سطرهای زوج اعمال شود کافیست آن را به even تغییر دهید.
و همچنین می توانید این کار را توسط کد HTML به صورت زیر انجام دهید.
کدهای HTML
|
|
<table border="1"style="width:100%">
<tbody>
<tr><td>Table Cell</td></tr>
<tr><td>Table Cell</td></tr>
<tr><td>Table Cell</td></tr>
<tr><td>Table Cell</td></tr>
<tr><td>Table Cell</td></tr>
<tr><td>Table Cell</td></tr>
</tbody>
</table>
|
راستی جی کوئری رو یادم رفت بگم (سلکتورهای جی کوئری فوق العاده هوشمند وقوی تر از css هستند که در مقاله های بعدی با آنها آشنا خواهید در وب سیتی!)
|
|
$("document").ready(function(){
$(" tr:even ").css({
'border':'3px solid red'
});
});
|
در کد بالا میگم سطر های زوج و انتخاب کن و یک بردر سه پیکسلی هم بده همین!
منتظر مقالات دیگر ما باشید….
:: بازدید از این مطلب : 698
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
